<template>
    <div class='home-menu'>
        <div class='menu-item' v-for='item of MenuData' :key='item.id'>
            <div class='menu-item-top'>
                <span class='iconfont menu-ico' v-html='item.icoCode'>
                    
                </span>
            </div>
            <div class='menu-item-bottom'>
                {{item.desc}}
            </div>
        </div>
       
    </div>
</template>

<script>
    export default {
        name: 'home-menu',
        data () {
            return {
                MenuData: [
                    {
                        "id": "01",
                        "icoCode": "&#xe6a6;",
                        "desc": "每日推荐"
                    },
                    {
                        "id": "02",
                        "icoCode": "&#xe642;",
                        "desc": "歌单"
                    },
                    {
                        "id": "03",
                        "icoCode": "&#xe6c5;",
                        "desc": "排行榜"
                    },
                    {
                        "id": "04",
                        "icoCode": "&#xe65b;",
                        "desc": "电台"
                    },
                    {
                        "id": "05",
                        "icoCode": "&#xe614;",
                        "desc": "直播"
                    }
                ]
            }
        }
    }
</script>

<style lang='scss' scoped>
    @import '../../../assets/scss/glo.scss';
    .home-menu {
        margin-top:2.64rem;
        @include flex(flex, row);
        padding:0 0.12rem 0.26rem 0.12rem;
        border-bottom:0.0133rem #f5f5f5 solid;
        .menu-item:last-child {
            margin-right:0;
        }
        .menu-item {
            width:20%;
            margin:0 0.1267rem 0 0.0267rem;
              
            .menu-item-top {
                width:1.14rem;
                height:1.14rem;
                color:#fff;
                background:#D83E34;
                /*background:#fff;
                color:#D83E34;*/
                @include verticalCenter(center, center);
                border-radius:50%;
                border:0.0133rem solid #D83E34;
                margin:0 auto;
                .menu-ico {
                    font-size:0.64rem;
                }
            }
            .menu-item-bottom {
                width:100%;
                height:0.8rem;
                margin-top:0.1333rem;
                @include verticalCenter(center, center);
                color:#555;
                font-size:0.32rem;
            }
        }
    }
</style>
